<template>
  <div class="bottom f-j-sb-a-c" :style="{'background':bottomBg}">
    <div class="name f-d-c">
      <span :style="{color:firstTextClolr}">DESAI</span>
      <span :style="{color:textColor}">Copyright © 2012- 2023 The DESAI. All Rights Reserved</span>
    </div>
    <div class="f-j-sb-a-c box">
      <div
        class="introduce f-d-c"
        v-for="(item, index) in introduceList"
        :key="index"
      >
        <div
          class="item"
          v-for="(it, ind) in item"
          :key="ind"
          @click.stop="gourl(it.url)"
        >
          <div v-if="index != 2">
            <span :style="{color:textColor}" v-if="it.text">{{ $t(it.text) }}</span>
          </div>

          <div v-else class="boxitem">
            <span :style="{color:firstTextClolr}" v-if="it.text">{{ $t(it.text) }}</span>
            <div class="f-a-c boxitem_imgs">
              <!-- <div
                class="boxitem_img click f-a-c"
                v-for="(item, index) in lianxi"
                :key="index"
                @click.stop="lianxiURL(item.url)"
              >
                <img :src="item.img" alt="" />
              </div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { useI18n } from "vue-i18n";
import { defineComponent, onMounted, reactive, toRefs, watch } from "vue";
import { useRouter } from "vue-router";
export default defineComponent({
  setup() {
    const { t } = useI18n();
    const router = useRouter();
    let data = reactive({
      introduceList: [
        [
          {
            text: "indexs.text",
            url: "",
          },
          {
            text: "indexs.text1",
            url: "",
          },
          {
            text: "indexs.text2",
            url: "",
          },
          {
            text: "indexs.text3",
            url: "",
          },
          {
            text: "indexs.text4",
            url: "",
          },
        ],
        [
          {
            text: "indexs.text5",
            url: "",
          },
          {
            text: "indexs.text6",
            url: "",
          },
          {
            text: "indexs.text7",
            url: "",
          },
          {
            text: "indexs.text8",
            url: "",
          },
          {
            text: "indexs.text9",
            url: "",
          },
        ],
        [
          {
            text: "indexs.text10",
            url: "",
          },
        ],
      ],
      lianxi: [
        {
          url: "",
          img: new URL("../assets/img/discord@2x.png", import.meta.url).href,
        },
        {
          url: "",
          img: new URL("../assets/img/bottom-telegram@2x.png", import.meta.url).href,
        },
        {
          url: "",
          img: new URL("../assets/img/m.png", import.meta.url).href,
        },
        {
          url: "",
          img: new URL("../assets/img/tg.png", import.meta.url).href,
        },
        {
          url: "",
          img: new URL("../assets/img/xx.png", import.meta.url).href,
        },
        {
          url: "",
          img: new URL("../assets/img/fc.png", import.meta.url).href,
        },
        {
          url: "",
          img: new URL("../assets/img/ut.png", import.meta.url).href,
        },
      ],
      bottomBg:" linear-gradient(180deg, rgba(0,0,0,1) 0%, #6A4AFB 100%)", //底部背景色
      firstTextClolr:"#fff",
      textColor:"#fff",
    });


    // 改变底部背景色
    let setBottomBg = (url)=>{
      if(url=="/"){
        data.bottomBg = " linear-gradient(180deg, rgba(0,0,0,1) 0%, #6A4AFB 100%)";
        data.textColor = "#ffffff";
        data.firstTextClolr = "#fff";
      }else{
        data.bottomBg = "#F3F8FF";
        data.textColor = "#8f979f";
        data.firstTextClolr = "#000000";


      }
    };

    // 监听路由 只有首页背景色为白色
    watch(()=>router.currentRoute.value.path,(newVal,oldVal)=>{
      setBottomBg(newVal)
    })
    

    // 跳转
    const gourl = (url) => {
      console.log(url);
    };
    const lianxiURL = (url) => {
      console.log(url);
    };

    onMounted(()=>{
      setBottomBg(router.currentRoute.value.path);
      // console.log(router.currentRoute.value.path)
    })

    return {
      lianxiURL,
      gourl,
      ...toRefs(data),
    };
  },
});
</script>

<style lang="scss">
.bottom {

  align-items: flex-start;
  // background: #F3F8FF;
  width: 100%;

  min-width: 1240px;
  padding: 110px 10%;
  //   transform: translateX(-25%);
  .name {
    > span {
      &:first-child {
        font-size: 30px;
        font-family: Source Han Sans CN-Bold, Source Han Sans CN;
        font-weight: bold;
        // color: $color-black;
        // color: #fff;
      }
      &:last-child {
        margin-top: 20px;
        font-size: 14px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        // color: $color-gray;
        // color: #fff;

      }
    }
  }
  .box {
  }
  .item {
    margin-top: 20px;
    span {
      cursor: pointer;
      font-size: 14px;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      font-weight: 400;
      // color: $color-gray;
      // color: #fff;

      &:active {
        opacity: 0.7;
      }
    }
    &:first-child {
      margin-top: 0;

    }
  }
  .introduce {
    // margin: 0 1.5vw;
    margin: 0 2vw;
    align-items: flex-start;
    &:nth-child(2) {
      margin: 0 2.5vw;
    }
    &:last-child {
      z-index: 1;
      margin-right: 0vw;
      //   margin-right: 190px;
    }
    .boxitem {
      >span:first-child{
        // color: $color-black;
        // color: #fff;

      }
      span {
        font-size: 15px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        // color: #f9f9f9;
        // color: $color-gray;
        // color: #fff;

        cursor: pointer;
        &:active {
          opacity: 0.7;
        }
      }
      .boxitem_imgs {
        flex-wrap: wrap;
        width: 360px;
      }
      .boxitem_img {
        margin: 30px 10px 0;
        // margin-left: 20px;
        // margin-top: 30px;
        > img {
          width: 52px;
          // height: 31px;
        }
        // &:first-child {
        //   margin-left: 0;
        // }
        // &:nth-child(5) {
        //   margin-left: 0;
        // }
      }
    }
    .teshu {
    }
  }
}
// @media screen and (max-width: 1700px) {
//   .introduce {
//     margin-right: 70px !important;
//   }
// }
// @media screen and (max-width: 1400px) {
//   .introduce {
//     margin-right: 50px !important;
//   }
// }
// @media screen and (max-width: 1300px) {
//   .introduce {
//     margin-right: 10px !important;
//   }
// }
</style>
